<script setup>
import { useVModel } from "@/utils/useVModel";

const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
		default: () => ({
			id: 0,
			type: 1,
			name: "",
			pid: "",
			url: "",
			icon: "",
			method: "",
			perms: "",
			code: "",
			sort: 0,
			status: 0,
		}),
	},
	list: {
		type: Array,
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);
const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	const entries = Object.entries(formRef.value.$.exposed);
	if (instance) {
		for (const [key, value] of entries) {
			instance.exposed[key] = value;
		}
	}
});

defineExpose({ ...instance.exposed });

const defaultProps = {
	children: "children",
	label: "name",
	value: "id",
};
// 图标选择
const visible = ref(false);
const onSelect = (e) => {
	model.value.icon = e;
};
const rules = ref({
	type: [{ required: true, message: "请输入菜单类型", trigger: "change" }],
	name: [{ required: true, message: "请输入菜单名称", trigger: "change" }],
	pid: [{ required: true, message: "请输入菜单路径", trigger: "change" }],
});

watch(model.value, (val) => {
	console.log(val);
});

const options = [
	{ label: "目录", value: 1 },
	{ label: "菜单", value: 2 },
	{ label: "按钮", value: 3 },
];
</script>

<template>
	<el-form :model="model" :rules="rules" label-width="120px" ref="formRef">
		<el-form-item label="菜单类型" prop="type">
			<el-select v-model="model.type" placeholder="请选择菜单类型" style="width: 100%">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</el-form-item>
		<el-form-item label="菜单名称" prop="name">
			<el-input v-model="model.name" placeholder="请输入菜单名称" clearable />
		</el-form-item>
		<el-form-item label="所属菜单" prop="pid">
			<el-tree-select
				placeholder="请选择所属菜单"
				v-model="model.pid"
				:data="list"
				:render-after-expand="false"
				:default-expand-all="true"
				:expand-on-click-node="false"
				:check-strictly="true"
				:props="defaultProps"
				style="width: 100%"
			/>
		</el-form-item>
		<el-form-item label="资源路径" prop="path" v-if="model.type === 1 || model.type === 2">
			<el-input v-model="model.path" placeholder="请输入资源路径" clearable />
		</el-form-item>
		<el-form-item label="图标" prop="icon" v-if="model.type === 1">
			<el-input v-model="model.icon" placeholder="请输入图标" clearable
				><template #append> <el-button @click="() => (visible = true)">选择图标</el-button> </template></el-input
			>
		</el-form-item>
		<el-form-item label="请求方式" prop="method" v-if="model.type === 3">
			<el-input v-model="model.method" placeholder="请输入请求方式，如：GET、POST" />
		</el-form-item>
		<el-form-item label="授权标识" prop="perms" v-if="model.type === 3">
			<el-input v-model="model.perms" placeholder="请输入授权标识，如role:create" />
		</el-form-item>
		<el-form-item label="按钮标识" prop="code" v-if="model.type === 3">
			<el-input v-model="model.code" placeholder="请输入按钮标识，如btn-role-create" />
		</el-form-item>
		<el-form-item label="排序" prop="sort">
			<el-input v-model="model.sort" />
		</el-form-item>
		<el-form-item label="状态" prop="status">
			<el-switch v-model="model.status" :active-value="0" :inactive-value="1" @change="handStatusChange(row.id)" />
		</el-form-item>
	</el-form>
	<SelectSvg v-model="visible" :icon="model.icon" @select="onSelect" />
</template>
